import { Radar } from '@ant-design/charts';
import React from 'react';

interface RadarChartProps {
  radarChartId: string;
  RadarChartData: Array<RadarChartDataType>;
}

type RadarChartDataType = {
  item: string;
  type: string;
  score: number;
};

const RadarChart: React.FC<RadarChartProps> = React.memo(
  ({ RadarChartData, radarChartId }) => {
    // console.log('子组件调用了');

    const config = {
      autoFit: 'true',
      data: RadarChartData,
      xField: 'item',
      yField: 'score',
      colorField: 'type',
      legend: {
        color: {
          itemLabelFontSize: 16,
          itemLabelFill: '#fff',
          itemMarkerFillOpacity: 1,
          itemMarkerStrokeOpacity: 1,
          itemMarker: 'circle',
          itemSpacing: 10,
        },
        size: {},
      },
      area: {
        style: {
          fillOpacity: 0.01,
        },
      },
      scale: {
        y: { tickCount: 5, domainMax: 80, fill: '#fff' },
      },
      axis: {
        x: {
          line: true,
          label: true,
          labelFill: '#fff',
          labelFontSize: 16,
          labelFillOpacity: 1,
        },
        y: {
          line: true,
          gridStroke: '#fff',
          gridStrokeOpacity: 1,
          lineStrokeOpacity: 1,
          label: true,
        },
      },
    };
    return <Radar id={radarChartId} {...config} />;
  },
);

export default RadarChart;
